<template>
    <div class="scene-wrapper">
        <div class="scene-controller" v-for="(scene, index) in scenes" :key="index">
            <el-select v-model="selectedLayers[index]" multiple placeholder="选择图层" @change="onLayerChange(index)" style="width: 200px">
                <el-option v-for="layer in scene.layerList" :key="layer.name" :label="layer.name" :value="layer.name" />
            </el-select>
            <div :id="`scene-container-${index}`" class="scene-container"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
import 'element-plus/es/components/select/style/css';
import 'element-plus/es/components/option/style/css';

interface LayerInfo {
    name: string;
    layer: any;
}

interface SceneData {
    viewer: any;
    layerList: LayerInfo[];
}

// 场景数量
const SCENE_COUNT = 3;
const scenes = reactive<SceneData[]>([]);
const selectedLayers = ref<string[][]>([]);

onMounted(() => {
    for (let i = 0; i < SCENE_COUNT; i++) {
        const sceneId = `scene-container-${i}`;
        const viewer = new SuperMap.WebGL.Viewer(sceneId, {
            // 替换为你的 scene URL
            sceneUrl: 'https://www.supermapol.com/realspace/services/3D-sample/rest/realspace'
        });

        viewer.scene.open(() => {
            const layers = viewer.scene.layers._layerQueue.map((layer: any) => ({
                name: layer.name,
                layer
            }));

            scenes[i] = { viewer, layerList: layers };
            selectedLayers.value[i] = layers.map((l) => l.name); // 默认全部显示
        });
    }
});

function onLayerChange(index: number) {
    const currentScene = scenes[index];
    const selected = selectedLayers.value[index];

    currentScene.layerList.forEach(({ name, layer }) => {
        layer.setVisible(selected.includes(name));
    });
}
</script>

<style scoped>
.scene-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.scene-controller {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.scene-container {
    width: 600px;
    height: 400px;
    border: 1px solid #ccc;
}
</style>
